@page "/RazorTemplates"

<h1>Razor Templates</h1>

<p>Render fragments can be defined using Razor template syntax. Razor templates are a way to define a UI snippet.</p>

<pre><code>@@code{
    private RenderFragment timeTemplate = @@&lt;p&gt;The time is @@DateTime.Now.&lt;/p&gt;;
    private RenderFragment&lt;Pet&gt; petTemplate = (pet) =&gt; @@&lt;p&gt;Your pet's name is @@pet.Name.&lt;/p&gt;;
}
</code></pre>

<p>Render fragments defined using Razor templates can be passed as arguments to templated components or rendered directly. For example, the previous templates are directly rendered with the following Razor markup:</p>

<pre><code>@@timeTemplate

@@petTemplate(new Pet { Name = "Rex" })</code></pre>

@timeTemplate

@petTemplate(new Pet { Name = "Rex" })

@code {
    private RenderFragment timeTemplate = @<p>The time is @DateTime.Now.</p>;
    private RenderFragment<Pet> petTemplate = (pet) => @<p>Your pet's name is @pet.Name.</p>;

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}
